<template>
  <div class="home_main">
    <div class="nav_bar primary_deep3_color">
      <h2>
        <img class="logo" src="../../assets/blog_logo_white.png" />CemCode | Blog 后台
      </h2>
      <p class="router_path">{{ this.nowRouterPath }}</p>
      <a class="return_article_page_span iconfont" @click="()=>this.$router.replace({path:'/'})" title="返回博客首页">&#xe8d3;</a>
      <div class="head_con">
        <span>你好，管理员</span>
        <img src="../../assets/head_icon.jpg" alt="head" class="user_head" />
      </div>
    </div>
    <div class="middle_con">
      <div class="left_router_link_con">
        <LinkMenu />
      </div>
      <div class="right_router_view_con">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
import LinkMenu from "./components/LinkMenu.vue";
import { mapGetters, mapActions } from 'vuex'

export default {
  name: "admin-home",
  components: {
    LinkMenu,
  },
  data() {
    return {
    }
  },
  computed: {
    ...mapGetters(["nowRouterPath"]),
  },
  mounted() {
    this.setNowPath(this.$route)
  },
  methods: {
    ...mapActions(["setNowPath"])
  },
};
</script>
<style lang="scss" scoped>
$nav_bar_color: #0099e6;
$primary-color: #00a9ff;
$primary-font-color: white;
$title-font-color: #333;
$message-font-color: #333;
$thin-font-color: #999;

.home_main {
  width: 100%;
  height: 100%;
  font-size: 13px;

  .nav_bar {
    width: 100%;
    height: 50px;
    background-color: $nav_bar_color;
    transition: 1s;
    color: $primary-font-color;
    padding: 0 12px;
    display: flex;
    align-items: center;
    box-sizing: border-box;

    .return_article_page_span {
      text-decoration: none;
      color: white;
      display: inline-block;
      box-shadow: 0 0 3px 0 white;
      width: 30px;
      height: 30px;
      line-height: 30px;
      margin-left: 50px;
      text-align: center;
      border-radius: 50%;
      cursor: pointer;
      transition-duration: 1s;

      &:hover {
        transform: rotate(360deg);
        box-shadow: 0 0 10px 0 white;
        transition-duration: 1s;
      }
    }

    .logo {
      height: 35px;
      margin-right: 10px;
      vertical-align: middle;
    }

    .router_path {
      margin-left: 20px;
    }

    .head_con {
      flex: 1 auto;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .user_head {
        width: 35px;
        height: 35px;
        border: 1px solid $primary-font-color;
        border-radius: 50%;
        margin-left: 10px;
      }
    }
  }

  .middle_con {
    width: 100%;
    height: calc(100% - 50px);
    display: flex;

    .left_router_link_con {
      min-width: 150px;
      max-width: 150px;
      overflow: hidden;
      background-color: $primary-color;
    }

    .right_router_view_con {
      flex: 1 auto;
      overflow: hidden;
      background-color: rgb(245, 245, 245);
    }
  }
}
</style>